<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <link rel="icon" href="./source/image/favicon.ico">
    <link rel="stylesheet" href="./source/styles/font-awesome/css/font-awesome.min.css">
    <title>JS 30: Custom video player</title>
</head>
<body>
    <section class="player">
        <video class="player__video viewer" src="./source/video/652333414.mp4"></video>
        <div class="splash-layer">
            <div class="status pause"><i class="fa fa-pause" aria-hidden="true"></i></div>
            <div class="status start"><i class="fa fa-play" aria-hidden="true"></i></div>
            <div class="status rollfoward"><i class="fa fa-forward" aria-hidden="true"></i></div>
            <div class="status rollback"><i class="fa fa-backward" aria-hidden="true"></i></div>
            <div class="status mute"><i class="fa fa-volume-off" aria-hidden="true"></i></div>
            <div class="status unmute"><i class="fa fa-volume-up" aria-hidden="true"></i></div>
        </div>
        <div class="player__controls">
            <div class="progress" draggable="false">
                <div class="progress__filled" draggable="false"></div>
            </div>
            
            <button class="player__button toogle"><i class="fa fa-play" aria-hidden="true"></i></button>
            <div class="add-controllers">
                <div class="player__sound-controller toast-slider">
                    <button class="player__button toogle"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
                    <div class="slider-background">
                        <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
                    </div>
                </div>
                <div class="player__time-speed toast-slider">
                    <button class="player__button toogle"><i class="fa fa-clock-o" aria-hidden="true"></i></button>
                    <div class="slider-background">
                        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
                    </div>
                </div>
                <button class="player__button skip-time" data-skip="-10">« 10s</button>
                <button class="player__button skip-time" data-skip="25">25s »</button>
            </div>
        </div>
    </section>

    <script src="./main.js"></script>
</body>
</html>